<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .info-all{
      clear: both;
      content: "";
      overflow: hidden;
      background-color: #fff;
      padding: 20px 60px 20px 20px;
      width: 1200px;
      height: 574px;
    }
    .info-left{
      float: left;
      margin: 0;
      padding: 0;
    }
    .info-left-img{
      width: 400px;
      margin: 0 auto;
      display: block;
    }
    .info-content{
      width: 670px;
      height: 511px;
      float: right;
      margin: 0;
      padding: 0;
      display: block;
    }
    .info-title{
      font-weight: 600;
      font-size: 20px;
      padding-bottom: 25px;
      border-bottom: 1px solid #ccc;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .info-right{
      clear: both;
      content: "";
      margin-top: 10px;
      font-size: 14px;
      color: #666;
      display: block;
      padding: 0;

    }
    .info-right-p{
      float: left;
      margin: 0;
      padding: 0;
    }
    .info-right-text{
      float: right;
      margin: 0;
      padding: 0;
    }
    .info-right-coupon{
      clear: both;
      content: "";
      overflow: hidden;
      height: 80px;

    }
    .info-right-off{
      width: 600px;
      float: right;
      position: relative;
      top: 50%;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
    }
    .info-right-coupon-p{
      float: left;
      position: relative;
      top: 50%;
      font-size: 14px;
      color: #666;
      margin: 0;
    }
    .info-right-time{
      clear: both;
      content: "";
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    .info-right-time-p{
      font-size: 14px;
      color: #666;
      height: 30px;
      line-height: 30px;
      float: left;
    }
    .info-input-time{
      width: 600px;
      float: right;
    }
    .info-right-input{
      border: 1px solid #ccc;
      outline: none;
      width: 120px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
      margin-right: 10px;
    }
    .info-price{
      padding: 20px;
      background-color: rgb(240,240,240);
      margin-top: 20px;
    }
    .info-price-top{
      height: 36px;
      clear: both;
      content: "";
      overflow: hidden;
    }
    .price-top{
      float: left;
    }
    .info-price-bottom{
      clear: both;
      content: "";
      overflow: hidden;
    }
    .info-price-bottom-left{
      float: left;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      text-decoration: line-through;
    }
    .info-price-bottom-right{
      float: right;
    }
    .info-count{
      clear: both;
      content: "";
      overflow: hidden;
      margin-top: 55px;
      font-size: 14px;
      height: 42px;

    }
    .info-count-left {
      height: 32px;
      float: left;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .info-count-right{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      height: 32px;
      float: right;
    }
    .info-count-right1{
      float: left;
    }
    .info-count-right2{
      margin-left: 10px;
      float: right;

    }






  </style>
</head>
<body>
<div id="app">

  <div class="info-all">

    <div class="info-left">
      <div class="info-left-img">
        <el-carousel height="400px" style="width: 400px;" >
          <col span="">
          <el-carousel-item v-for="url in picArr">
            <img :src="url" width="`25%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>



    <div class="info-content">
      <p class="info-title">永恒回忆</p>
      <div class="info-right">
        <p class="info-right-p">材料：</p>
        <span class="info-right-text">红玫瑰33枝，石竹梅外围点缀</span>
      </div>

      <div class="info-right">
        <p class="info-right-p">包装：</p>
        <span class="info-right-text">白色棉纸内包，黑色包装纸外围圆形包装，红色丝带蝴蝶结</span>
      </div>

      <div class="info-right">
        <p class="info-right-p">附送：</p>
        <span class="info-right-text">下单填写留言，免费赠送贺卡</span>
      </div>

      <div class="info-right">
        <p class="info-right-p">配送：</p>
        <span class="info-right-text">全国送货上门,市区免运费</span>
      </div>

      <div class="info-right-coupon">
        <p class="info-right-coupon-p">优惠券:</p>
        <div class="info-right-off">
          <div style="font-size: 14px;color: #666">暂无优惠券</div>
        </div>
      </div>

      <div class="info-right-time">
        <p class="info-right-time-p">配送时间</p>
        <div class="info-input-time">
          <input type="date" name="senddata" class="info-right-input">
          <select name="sendtime">
            <option selected>不限时间</option>
            <option value="810">8:00-10:00</option>
            <option value="1012">10:00-12:00</option>
            <option value="1214">12:00-14:00</option>
            <option value="1416">14:00-16:00</option>
            <option value="1618">16:00-18:00</option>
            <option value="1820">18:00-20:00</option>
            <option value="2022">20:00-22:00</option>
            <option value="sw">上午</option>
            <option value="xw">下午</option>
            <option value="ws">晚上</option>
          </select>
          <select name="sendprice">
            <option selected>市区免费配送</option>
            <option value="jj">近郊+30.00运费</option>
            <option value="yj">远郊+50.00运费</option>
          </select>
        </div>
      </div>

      <div class="info-price">
        <div class="info-price-top">
          <p class="price-top">店铺价：  ￥328</p>
        </div>
        <div class="info-price-bottom">
          <p class="info-price-bottom-left">市场价：  ￥399</p>
          <p class="info-price-bottom-right">销量16022笔</p>
        </div>

      </div>

      <div class="info-count">
      <div class="info-count-left">
        <span class="count-text">数量</span>
        <template>
          <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>
      </div>
        <div class="info-count-right">
          <div class="info-count-right1">
            <el-button>加入购物车</el-button>
          </div>
          <div class="info-count-right2">
            <el-button>立即购买</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        picArr: ["imgs/left1.jpg", "imgs/left2.jpg", "imgs/left3.jpg", "imgs/left4.jpg",],
          num: 1

      }
    },
    methods:{
      handleChange(value) {
        console.log(value);
      }


    }
  })
</script>
</html>